<template>
	
	<view class="bigbox">
		<block v-for="(item,index) in res.data.data">
		<view class="header">
			<view class="activity_title">
				{{item.name}}
			</view>
			<view class="resp_unit">
				<view class="title">负责单位</view>
				<text>{{item.principal}}</text>
			</view>
			<view class="activity_time">
				<view class="title">活动时间</view>
				<text class="time">
					{{item.beginTime}}  -  {{item.endTime}}
				</text>
			</view>
			<view class="resp_unit">
				<view class="title">活动类型</view>
				<text>{{item.competitionType}}</text>
			</view>
			<view class="resp_unit">
				<view class="title">活动对象</view>
				<text>{{item.grade}}</text>
			</view>
			<view class="resp_unit">
				<view class="title">具体类型</view>
				<text>{{item.infoType}}</text>
			</view>
			<view class="resp_unit">
				<view class="title">联系电话</view>
				<text>{{item.phone}}</text>
			</view>
			<view class="labels">
				<view class="lab" v-for="(item1,index1) in tables[0].labels">{{item1}}</view>
			</view>
		</view>
		<view class="content">
			<view class="title">文件详情</view>
			<view class="text">
				<textarea disabled >{{item.content}}</textarea>
			</view>
			<button class="download">下载文件</button>
		</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:{},
				con:{
					"beginTime": "string",
					  "competitionName": "string",
					  "competitionType": "string",
					  "content": "string",
					  "endTime": "string",
					  "fileUrl": "string",
					  "finishType": "string",
					  "grade": "string",
					  "id": 0,
					  "infoType": "string",
					  "majorId": 0,
					  "name": "string",
					  "phone": "string",
					  "placeId": 0,
					  "principal": "string",
					  "schoolId": 0,
					  "sponsoId": 0,
					  "tabBar": "string"
				},
				tables:[
					{title:'互联网+比赛',fuze:'学生创协',time:{start:'2022.4.12',end:'2022.5.12'},labels:['互联网+','标签','创新创业','互联网+','标签','创新创业'],detail:"这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！这是活动详情！！！！！！！"},
				]
			}
		},
		onLoad(option) {
			this.con.id=option.id;
			uni.request({
				url:'http://120.77.247.146:8080/admin/activeDetail',
				method:'POST',
				data:this.con,
				success: (res) => {
					this.res=res,
					console.log(res)
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
.bigbox{ 
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #FAFAFA;
	overflow:hidden;
}
.header{
	padding: 30rpx;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
		
}
.header .activity_title{
	font-size: 38rpx;
	color: #212121;
	padding-bottom: 10rpx;
	font-weight: 600;
}
.header .title{
	display: inline-block;
	margin-right: 30rpx;
	color: #757575;
}
.header .resp_unit{
	margin-top: 20rpx;
	color: #212121;
}

.header .activity_time{
	margin-top: 20rpx;
}
.header .activity_time .time{
	margin: 15rpx 0;
}
.header .labels{
	display: flex;
	flex-wrap:wrap;
	margin-top: 10rpx;
}
.header .labels .lab{
	margin-right: 20rpx;
	background-color: #fff;
	padding: 8rpx 10rpx;
	margin-top: 20rpx;
	color: #007AFF;
	border-radius: 8rpx;
	font-size: 28rpx;
	border: #007AFF 2rpx solid;
}
.content{
	padding: 30rpx;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
	margin-top: 30rpx;
}
.content .title{
	font-size: 32rpx;
	margin-bottom: 20rpx;
}
.content .text{
	background-color: #eee;
	padding: 25rpx 25rpx 0 25rpx;
	border-radius: 5rpx;
}
.content .text textarea{
	display: block;
	width: 100%;
	height: auto;
	min-height:260px;
}
.content .download{
	margin-top: 40rpx;
	background-color: #007AFF;
	color: #fff;
	font-size: 30rpx;
	margin-bottom: 20rpx;
}
</style>
